/*
 * @Author: 
 * @Date: 2022-01-26 13:59:32
 * @LastEditors: lqj
 * @LastEditTime: 2022-02-07 17:50:05
 * @Description: 请填写简介
 */
import React, { Component } from 'react';

class Footer extends Component {
  handleClear = () => {
    this.props.clearAll()
  }
  handleChangeAll = (e) => {
    this.props.changeAllList(e.target.checked)
  }
  checkAll = (e) => {
    // console.log(e)
  }
  render() {
    const { todoList } = this.props
    const isCheckNum = todoList.filter(it => it.isCheck).length
    const total = todoList.length
    return (
      <div className='todo-footer'>
        <label>
          <input ref={this.checkAll} type="checkbox" checked={isCheckNum === total && total !== 0 ? true : false} onChange={this.handleChangeAll} />
        </label>
        <span>
          <span>已完成{isCheckNum}</span> / 全部{total}
        </span>
        <button onClick={this.handleClear} className="btn btn-danger">清除已完成任务</button>
      </div>
    );
  }
}

export default Footer;
